<template>
  <div style="padding-top: 10px">
    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">Service</el-col>
      <el-col :span="17" class="el-col-secondary">{{ serviceInfo.name }}</el-col>
    </el-row>

    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">服务描述</el-col>
      <el-col :span="17" class="el-col-secondary">{{ serviceInfo.description }}</el-col>
    </el-row>
    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">服务类型</el-col>
      <el-col :span="17" class="el-col-secondary">{{ serviceInfo.serviceType }}</el-col>
    </el-row>
    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">环境</el-col>
      <el-col :span="17" class="el-col-secondary">
        <span>{{ serviceInfo.env }}</span>
      </el-col>
    </el-row>
    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">区域</el-col>
      <el-col :span="17" class="el-col-secondary">
        <span>{{ serviceInfo.zone }}</span>
      </el-col>
    </el-row>
    <div v-if="serviceInfo.serviceType === 'ES'">
      <el-row class="el-row-basic">
        <el-col :span="7" class="el-col-first">租户部门</el-col>
        <el-col v-if="serviceInfo.department" :span="17" class="el-col-secondary">
          <span>{{ serviceInfo.department.name }}</span>
        </el-col>
      </el-row>
      <el-row class="el-row-basic">
        <el-col :span="7" class="el-col-first">Kibana地址</el-col>
        <el-col :span="17" class="el-col-secondary">
          <span>{{ serviceInfo.kibanaUrl }}</span>
        </el-col>
      </el-row>
    </div>
    <div v-if="serviceInfo.serviceType === 'DFS'">
      <el-row class="el-row-basic">
        <el-col :span="7" class="el-col-first">服务端口</el-col>
        <el-col v-if="serviceInfo.ports" :span="17">
          <el-row v-for="item in serviceInfo.ports.split(',')" :key="item">
            <el-col class="el-col-col-secondary">{{ item }}</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="el-row-basic">
        <el-col :span="7" class="el-col-first">LB IP</el-col>
        <el-col v-if="serviceInfo.lbIp" :span="17">
          <el-row v-for="item in serviceInfo.lbIp.split(',')" :key="item">
            <el-col class="el-col-col-secondary">{{ item }}</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="el-row-basic">
        <el-col :span="7" class="el-col-first">LB Domain</el-col>
        <el-col v-if="serviceInfo.lbDomain" :span="17">
          <el-row v-for="item in serviceInfo.lbDomain.split(',')" :key="item">
            <el-col class="el-col-col-secondary">
              <a>{{ item }}</a>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">创建时间</el-col>
      <el-col :span="17" class="el-col-secondary">{{ serviceInfo.createTime }}</el-col>
    </el-row>

    <el-divider class="divider-basic"></el-divider>

    <el-row class="el-row-basic">
      <el-col :span="7" class="el-col-first">负责人</el-col>
      <el-col v-if="owners.length > 0" :span="17">
        <el-row v-for="item in owners" :key="item.id">
          <el-col :span="4"><el-avatar shape="square" :size="avatarSize" fit="fill" :src="require(`@/assets/user.png`)"></el-avatar></el-col>
          <el-col v-if="item.nickname != null" :span="20" class="el-col-col-secondary">{{ item.nickname }}</el-col>
          <el-col v-else :span="20" class="el-col-col-secondary">{{ item.username }}</el-col>
        </el-row>
      </el-col>
      <el-col v-else :span="17" style="color: #303133">-</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Base',
  props: {
    serviceInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      avatarSize: 'small',
      owners: [
        { id: 1, username: 'liuyu', nickname: '刘宇' },
        { id: 2, username: 'miaoyongbin', nickname: '苗永宾' },
        { id: 3, username: 'chenqingyang', nickname: '陈晴阳' },
        { id: 4, username: 'zhujiajun', nickname: '朱家俊' },
        { id: 5, username: 'zhangchangshuang', nickname: '张长双' }
      ]
    }
  },
  computed: {}
}
</script>

<style scoped>
.divider-basic {
  background-color: rgb(244, 244, 245);
  width: 70%;
  margin: 20px 50px;
}
.el-col-first {
  color: #909399;
  text-align: right;
  font-weight: 500;
  padding-right: 12px;
  line-height: 26px;
}
.el-col-secondary {
  color: #303133;
  line-height: 26px;
}
.el-row-basic {
  margin: 10px auto 10px;
  font-size: 14px;
  font-weight: 500;
  height: 100%;
}
.el-col-col-secondary {
  color: #303133;
  line-height: 28px;
}
</style>
